import React, { useState, useRef } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { queryRule, getPayOrder } from './service';
import { handleDate,fomatDate } from '@/utils/utils';
import OrderCommon from '@/pages/OrderCommon';
import CreateForm from './components/CreateForm';
import { Input, message  } from 'antd';
import { useEffect } from 'react';
import Moment from 'moment';

const TableList = (props) => {
  const [payOrderValues, setPayOrderValues] = useState({});
  const [order, setOrder] = useState(false);
  const actionRef = useRef();
  const [count, setCount] = useState();
  const [memberNum, setMemberNum] = useState();
  /** 国际化配置 */
  const handlePay = (params) => {
    getPayOrder(params).then((res) => {
      const { code, data } = res;
      code === 0 ? (setPayOrderValues(data), setOrder(true)) : null;
    });
  };
  useEffect(() => {
    const { query } = props.history.location;
    setTimeout(() => {
      return query?.cardNum ? setMemberNum(query?.cardNum) : setMemberNum();
    }, 0);
    actionRef.current.reload();
  }, [props.history.location.query?.cardNum]);
  const columns = [
    {
      title: '会员卡号',
      dataIndex: 'memberNumber',
      renderFormItem: () => {
        return <Input allowClear onChange={(e) => setMemberNum(e.target.value)} />;
      },
    },
    {
      title: '会员名',
      dataIndex: 'memberName',
      render: (dom, entity) => {
        return <a>{dom}</a>;
      },
      hideInSearch: true,
    },
    {
      title: '会员手机号',
      dataIndex: 'memberMobile',
      hideInSearch: true,
    },

    {
      title: '应返积分',
      dataIndex: 'integral',

      hideInSearch: true,
    },
    {
      title: '赠送比例',
      dataIndex: 'scale',
      hideInSearch: true,
      render: (dom) => {
        return <div>{dom}%</div>;
      },
    },
    {
      title: '积分来源',
      dataIndex: 'type',
      hideInSearch: true,
      valueEnum: {
        2: {
          text: '充值',
          status: 'Processing',
        },
        1: {
          text: '消费',
          status: 'Success',
        },
      },
    },
    {
      title: '是否到账',
      dataIndex: 'returnType',
      hideInSearch: true,
      valueEnum: {
        true: {
          text: '已到账',
          status: 'Processing',
        },
        false: {
          text: '未到账',
          status: 'Success',
        },
      },
    },
    {
      title: '增送日期',
      dataIndex: 'currentDate',
      hideInSearch: true,
      valueType: 'date',
      render: (_) => {
        return <span>{ Moment(_.props.text).format('yyyy-MM')}</span>;
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          onClick={() => {
            handlePay(record.billId);
            setOrder(true);
          }}
        >
          查看订单详情
        </a>,
      ],
    },
  ];
  return (
    <PageContainer>
      <ProTable
        headerTitle="每日积分赠送明细记录"
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={false}
        request={(params, sorter, filter) =>
          queryRule({ ...params, sorter, filter, memberNumber: memberNum })
        }
        onReset={(params) => {
          props.history.replace({ cardNum: '' }, props.history.location);
          setMemberNum();
          actionRef.current.reload();
        }}
        postData={(params) => {
          const { list, total } = params;

          //message.success(`${props.history.location.query.cardNum || ''}积分记录查询成功!`);
          setCount(total);
          return list;
        }}
        pagination={{
          defaultPageSize: 24,
          showSizeChanger: false,
          showTitle: false,
          total: count,
          showTotal: (total) => `共${total}条`,
        }}
        columns={columns}
      />
      <CreateForm
        title={'订单详情'}
        width={1300}
        onCancel={() => setOrder(false)}
        modalVisible={order}
      >
        <OrderCommon
          payOrderValues={payOrderValues}
          refund={false}
          // refund={
          //   details
          //     ? details.status === 0 || details.status === 1 || details.status === 3
          //       ? null
          //       : payRef
          //     : null
          // }
        />
      </CreateForm>
    </PageContainer>
  );
};

export default TableList;
